<template>
  <div
    class="app-container"
    :style="`min-height: ${pageMinHeight}px;height:${pageMinHeight}px`"
  >
    <a-button @click="addMarkers">添加mark</a-button>
    <a-button @click="updateMarker">更新marker位置</a-button>
    <a-button @click="updateMarkerIcon">更新marker图标</a-button>
    <a-button @click="jumpMarker">跳转marker并展示</a-button>
    <div
      id="map"
      style="
        position: fixed;
        top: 30;
        right: 30;
        bottom: 130;
        left: 30;
        z-index: 1;
        width: 100%;
        height: 100%;
      "
    ></div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import L from 'leaflet'
  import 'leaflet/dist/leaflet.css'
  export default {
    data() {
      return {
        imageMap: '',
        tempIcon: null,
        updateTempIcon: null,
        ImageMapMarkerGroup: null,
        addMarker: null,
        backgroundImage: require('../../assets/img/2d.png'),
        icon: require('../../assets/img/add.png'),
        updateIcon: require('../../assets/img/iconType0.png'),
      }
    },
    computed: {
      ...mapGetters('setting', ['pageMinHeight']),
    },
    watch: {},
    mounted() {
      this.$nextTick(() => {
        this.init2DMap()
      })
    },
    methods: {
      handleSubmit() {},
      init2DMap() {
        var bounds = [
          [0, 0],
          [914, 1639],
        ]

        this.imageMap = new L.Map('map', {
          crs: L.CRS.Simple,
          minZoom: -2,
          maxZoom: 3,
          attributionControl: false,
          zoomControl: false,
        })
        this.image = L.imageOverlay(this.backgroundImage, bounds).addTo(
          this.imageMap
        )
        this.imageMap.fitBounds(bounds)
        this.imageMap.setZoom(-1)
        //设置默认比例
        //向地图添加标注对象
        this.image.on('load', function () {})
        this.imageMap.on('contextmenu', function (e) {
          var showString = '此处坐标：' + e.latlng.lat + ' , ' + e.latlng.lng
          var helloPopup = L.popup().setContent(showString)
          helloPopup.setLatLng(e.latlng).openOn(this.imageMap)
        })
        this.ImageMapMarkerGroup = new L.FeatureGroup()
        this.tempIcon = new L.icon({
          iconUrl: this.icon,
          iconRetinaUrl: this.icon,
          iconSize: [29, 29],
          iconAnchor: [15, 29],
          popupAnchor: [0, -36],
          // shadowUrl: shadowUrl,
          // shadowRetinaUrl: shadowUrl,
          shadowSize: [68, 95],
          shadowAnchor: [22, 94],
        })

        L.marker([447.984375, 738.40625], {
          icon: this.tempIcon,
          draggable: false,
          pointId: '附加字段',
        })
          .bindPopup('<span>点击了</span>')

          .addTo(this.ImageMapMarkerGroup)

        //可以动态获取makers 弹框内容
        // markerClick.on('click', function (e) {
        // //获取附加字段
        // console.log(op.options.pointId)
        //   var op = e.target
        //   op.bindPopup('<span>点击了</span>').openPopup()
        // })
        this.imageMap.addLayer(this.ImageMapMarkerGroup)
      },
      getImageWidth(url, callback) {
        var img = new Image()
        img.src = url
        // 如果图片被缓存，则直接返回缓存数据
        if (img.complete) {
          callback(img.width, img.height)
        } else {
          img.onload = function () {
            callback(img.width, img.height)
          }
        }
      },
      addMarkers() {
        this.addMarker = L.marker(
          [
            447.984375 + Math.round(Math.random() * 400),
            738.40625 + Math.round(Math.random() * 1000),
          ],
          {
            icon: this.tempIcon,
            draggable: false,
            flog: 'new-add',
          }
        )
          .addTo(this.ImageMapMarkerGroup)
          .bindPopup('<span>新增marker</span>')
      },
      updateMarker() {
        console.log(this.imageMap, 'this.ImageMapMarkerGroup')
        this.addMarker &&
          this.addMarker.setLatLng([
            447.984375 + Math.round(Math.random() * 400),
            738.40625 + Math.round(Math.random() * 1000),
          ])
      },
      updateMarkerIcon() {
        this.updateTempIcon = new L.icon({
          iconUrl: this.updateIcon,
          iconRetinaUrl: this.updateIcon,
          iconSize: [29, 29],
          iconAnchor: [15, 29],
          popupAnchor: [0, -36],
          // shadowUrl: shadowUrl,
          // shadowRetinaUrl: shadowUrl,
          shadowSize: [68, 95],
          shadowAnchor: [22, 94],
        })
        this.addMarker && this.addMarker.setIcon(this.updateTempIcon)
      },
      jumpMarker() {
        this.addMarker && this.addMarker.openPopup()
      },
    },
  }
</script>
<style scoped lang="less">
  /deep/ .ant-layout-sider {
    position: relative;
    flex: 0 0 300px !important;
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    background: white;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }
</style>
